<template>
	<view>
		<div>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-yellow cur':''" v-for="(lineCategory, index) in lineData" :key="index" @click="show(index)" @tap="tabSelect" :data-id="index">
						{{index}}
					</view>
				</view>
			</scroll-view>
			<div v-for="(lineCategory, index) in lineData" :key="index" v-show="showArea[index]" class="content">
				<div v-for="(lineInfo, ind) in lineCategory" class="line" >
					<image v-if="lineInfo.img" :src="`${backEndUrl}/img/show/${lineInfo.img}`" style=" border-radius: 50px;padding: 10px;"></image>
					<div>{{lineInfo.lineName}}     {{lineInfo.remark}}     预算：<text style="color: red;">{{lineInfo.lineAmount}}</text>元</div>
					
					<div style="text-align: center;padding: 10px;">
					<button class="cu-btn bg-yellow round lg" @click="toDetail(lineInfo.id,lineInfo.lineAmount)" style="width: 300rpx;color: azure;">立即订购</button>
					</div>
					
				</div>
			</div>
		</div>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				backEndUrl: this.backEndUrl,
				lineData: {},
				showArea: {},
				TabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			show(id) {
				for (let item in this.showArea) {
					this.showArea[item] = false;
				}
				this.showArea[id] = true;
			},
			toDetail(id,lineAmount) {
				console.log(id)
				console.log("金额"+lineAmount)
				uni.navigateTo({
					url: './detaile?id='+id+'&amount='+lineAmount
				});
			},
			/**
			 * @param {Object} e 选择
			 */
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}

		},
		mounted() {
			this.$axios({
				method: 'get',
				url: '/line/fetchLineByCategory'
			}).then(res => {
				this.lineData = res.data;
				let i = 0;
				for (let item in this.lineData) {
					if (i == 0) {
						this.$set(this.showArea, item, true);
					} else {
						this.$set(this.showArea, item, false);
					}
					i++;
				}
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style>
	 

	.line {
		height: 250px;
		padding: 20px;
		flex-grow: 8;
		align-self: stretch;
	}

	image {
		height: 170px;
		margin: 0rpx auto;
		width: 100%;
	}
	 
	/**
	 * 设置按钮效果
	 * 
	 */
	 
	/**
	 * 分割线
	 */
	.hr {
	  width: 100%%;
	  height: 15rpx;
	  background: linear-gradient(to right, #78dcfe, #ffffff);
	}

</style>
